<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title}"></title>
    <link rel="stylesheet" th:href="@{/ins/css/bootstrap.min.css}">
    <link th:href="@{/ins/font-awesome/css/font-awesome.css}" rel="stylesheet">
    <link th:href="@{/ins/css/plugins/datapicker/datepicker3.css}" rel="stylesheet">

    <style>
        body{
            padding:60px;
        }

        .ibox-content {
            overflow: hidden;
        }

        .clear {
            padding: 6px 28px;
            line-height: 18px;
        }

        .nav-header {
            background: #263949;
        }

        .nav-header {
            padding: 6px 14px;
        }

        .user-icon {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: green;
            text-align: center;
        }

        .user-icon > i {
            color: #fff;
            font-size: 22px;
            line-height: 44px;
        }
        .group-btns{
            width:78px;
        }
        .modal-body{
            padding:46px;
        }
    </style>

</head>

    <!-- 翻页按钮 -->
    <div class="btn-group pull-right" th:fragment="btn_pager">
        <button type="button" class="btn btn-white" id="btn_first_page" title="首页"><i
                class="fa fa-angle-double-left"></i></button>
        <button type="button" class="btn btn-white" id="btn_pre_page" title="上一页"><i
                class="fa fa-angle-left"></i></button>
        <div class="btn btn_write" th:text="${page}==null?1:${page}+' / '+${pageTotal}"></div>
        <button type="button" class="btn btn-white" id="btn_next_page" title="下一页"><i
                class="fa fa-angle-right"></i></button>
        <button type="button" class="btn btn-white" id="btn_last_page" title="尾页"><i
                class="fa fa-angle-double-right"></i></button>
    </div>


    <div th:fragment="scripts">
        <!-- 引入 Jquery -->
        <script th:src="@{/ins/js/jquery-2.1.1.js}"></script>
        <!-- bootstrap js -->
        <script th:src="@{/ins/js/bootstrap.min.js}"></script>
        <script th:src="@{/ins/js/bootstrap-table.min.js}"></script>
        <script th:src="@{/ins/js/bootstrap-table-zh-CN.min.js}"></script>
        <script th:src="@{/ins/js/bootstrap-datepicker.js}"></script>
        <script>
            //翻页
            var page = [[${page} == null ? 1 :${page}]];
            var pageTotal = [[${pageTotal} == null ? 1 :${pageTotal}]];

            var myUrl = location.pathname + location.search;
            //去掉包含page的后面参数
            if (myUrl.indexOf("?") > 0) {
                var end = myUrl.indexOf('&page=');
                if (end > 0) {
                    myUrl = myUrl.substr(0, end);
                    myUrl += "&page=";
                } else if ((end = myUrl.indexOf('?page=')) > 0) {
                    myUrl = myUrl.substr(0, end);
                    myUrl += "?page=";
                } else {
                    myUrl += "&page=";
                }
            } else {
                myUrl += "?page=";
            }

            //console.info(myUrl + "| page=" + page);

            if (page <= 1) {
                $("#btn_pre_page").attr("disabled", "");
            }
            if (page >= pageTotal) {
                $("#btn_next_page").attr("disabled", "");
            }

            $("#btn_first_page").click(function () {
                //alert(myUrl);
                location.href = myUrl + "1";
            });
            $("#btn_pre_page").click(function () {
                //alert(myUrl);
                location.href = myUrl + (page - 1);
            });
            $("#btn_next_page").click(function () {
                //alert(myUrl);
                location.href = myUrl + (page + 1);
            });
            $("#btn_last_page").click(function () {
                //alert(myUrl);
                location.href = myUrl + pageTotal;

            });
        </script>

    </div>


</html>
